<template>
	<a-card class="dsh-container" v-show="!isShowDealPage">
		<template #title>
			<div>
				<span class="title">{{ n }}</span>
				<a-input placeholder="按流水号/报修人/维修类型等检索" v-model:value="keyword" class="search-ref" />
			</div>
		</template>
		<template #extra>
			<a-button type="primary" class="mybtn" @click="initData">查询</a-button>
			<a-button class="mybtn" @click="restData">重置</a-button>
		</template>
		<a-table
			:dataSource="dataSource"
			:columns="columns"
			size="small"
			bordered
			:scroll="{
				scrollToFirstRowOnChange: false,
				x: '100%',
			}"
			:pagination="{
				position: ['bottomCenter'],
				current: pagenumber,
				pageSize: pagesize,
				total: total,
				showTotal: (total) => `共 ${total}条`,
			}"
			:row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : null)"
		>
			<template #bodyCell="{ column, record }">
				<template v-if="column.key === 'operation'">
					<a-button type="link" v-if="record.rep_wo_instate != '删除' && record.rep_wo_instate != '结束'" @click="toDeal(record)">处理</a-button>
				</template>
				<template v-else-if="column.key === 'rep_wo_instate'"> 
					<a-tag v-if="record.rep_wo_instate1=='待审核' || record.rep_wo_instate1=='待受理'" color="#2db7f5">
						{{ record.rep_wo_instate }}
					</a-tag>
					<a-tag v-if="record.rep_wo_instate1=='待完工'" color="#108ee9">
						{{ record.rep_wo_instate }}
					</a-tag>
					<a-tag v-if="record.rep_wo_instate1=='已完工'" color="#87d068">
						{{ record.rep_wo_instate }}
					</a-tag>
					<a-tag v-if="record.rep_wo_instate1=='删除驳回'" color="#f50">
						{{ record.rep_wo_instate }}
					</a-tag>
				</template>
			</template>
		</a-table>
	</a-card>
	<a-card v-show="isShowDealPage" style="height: 100%;" :bodyStyle="{height:'100%'}">
		<template #title>
			<a-button :icon="h(ArrowLeftOutlined)" @click="goBackToList">返回</a-button>
			<span class="title-txt"> 工单处理</span>
		</template>
		<iframe :src="dealPageUrl" width="100%" height="1000px" style="border: 0;height: 100%"></iframe>
	</a-card> 
</template>
<script setup>
	import { ArrowLeftOutlined } from '@ant-design/icons-vue';
	import { RepairApi } from '@/api/repair-api';
	import { onMounted, ref, h } from 'vue';
	import tool from '@/utils/tool';
	import { KEY_CONST } from '@/constants/system-const';
	const props = defineProps({
		n: {
			type: String,
			default: '',
		},
	});
	const pagenumber = ref(1);
	const pagesize = ref(20);
	const total = ref(0);
	const keyword = ref('');
	const dataSource = ref([]);
	// 处理界面地址
	const dealPageUrl = ref('');
	// 是否显示处理界面
	const isShowDealPage = ref(false);
	onMounted(() => {
		initData();
	});
	const columns = [
		{
			title: '序号',
			dataIndex: 'index',
			key: 'index',
			name: 'index',
			fixed: 'left',
			width: '50px',
			align: 'center',
			customRender: (record) => `${record.index + 1}`,
		},
		{
			title: '工单流水号',
			dataIndex: 'rep_wo_serialnumber',
			width: '160px',
			align: 'center',
			ellipsis: true,
		},
		{
			title: '报修时间',
			dataIndex: 'rep_wo_insert_time',
			align: 'center',
			width: '150px',
			ellipsis: true,
		},
		{
			title: '报修人',
			dataIndex: 'rep_wo_repairbodyname',
			width: '90px',
			align: 'center',
			ellipsis: true,
		},
		{
			title: '学工号',
			dataIndex: 'rep_wo_phone',
			width: '120px',
			align: 'center',
			ellipsis: true,
		},
		{
			title: '维修类型',
			dataIndex: 'rep_wo_sizetype',
			width: '90px',
			align: 'center',
			ellipsis: true,
		},
		{
			title: '区域',
			dataIndex: 'rep_a_nameall',
			width: '150px',
			ellipsis: true,
		},
		{
			title: '项目',
			dataIndex: 'rep_i_nameall',
			width: '150px',
			ellipsis: true,
		},
		{
			title: '故障描述',
			dataIndex: 'rep_wo_fault_description',
			width: '250px',
			ellipsis: true,
		},
		{
			title: '状态',
			dataIndex: 'rep_wo_instate',
			key: 'rep_wo_instate',
			width: '80px',
			align: 'center',
			ellipsis: true,
		},
		{
			title: '手机号',
			dataIndex: 'rep_wo_phone',
			width: '120px',
			align: 'center',
			ellipsis: true,
		},
		{
			title: '是否紧急',
			dataIndex: 'rep_wo_urgent',
			width: '90px',
			align: 'center',
		},
		{
			fixed: 'right',
			title: '操作',
			width: '80px',
			align: 'center',
			key: 'operation',
		},
	];
	async function initData() {
		tool.showLoading();
		const res = await RepairApi.getOrders({
			rep_wo_instate1: props.n,
			keyword: keyword.value,
			pagenumber: pagenumber.value,
			pagesize: pagesize.value,
		});
		tool.hideLoading();
		if (res.code != '0') {
			tool.error(res.codemessage);
		} else {
			total.value = res.allsize;
			dataSource.value = res.data;
		}
		console.log(res);
	}
	function restData() {
		keyword.value = '';
		initData();
	}
	const toDeal = function (record) {
		isShowDealPage.value = true;
		const token = tool.readLocalStorage(KEY_CONST.USER_TOKEN);
		dealPageUrl.value =
			import.meta.env.VITE_APP_PAGE_URL +
			'/i/system/view.jsp?viewid=admin_repair_workorder_done_view&rep_wo_id=' +
			record.rep_wo_id +
			'&token=' +
			token;
	};
	const goBackToList = function(){
		isShowDealPage.value = false;
	}
</script>
<style lang="less" scoped>
	.dsh-container {
		width: 98%;
		margin: 8px auto;
		.search-ref {
			margin-left: 24px;
			width: 300px;
		}
		.mybtn {
			margin: 0 4px;
		}
	}
</style>
